<template>
  <div style="margin-left: 100px; margin-right: 100px">
    <div class="container">
      <el-carousel
        :interval="5000"
        arrow="always"
        style="width: 70%;height:20%"
        ref="carousel"
      >
      <!-- 走马灯 -->
        <el-carousel-item v-for="item in 3" :key="item  ">
          <img :src="url"  style="hight:120%" />
        </el-carousel-item>
      </el-carousel>

   <el-card shadow="hover" class="statistic-card">
  <h3 style="font-size: 20px;">
    <i class="el-icon-alarm-clock" style="font-size: 20px; color: darkblue;"></i> 
    <span style="font-size: 20px; color: darkblue;">高考时间轴</span>
  </h3>
  <h3>🚩距离高考还有：{{timeLeft}}</h3>
  <div class="message-box">
    <h4>1月</h4>
    <p>报名时间：具体时间待公布</p>
    <p>备考指南发布：具体时间待公布</p>
  </div>
  <div class="message-box">
    <h4>2月</h4>
    <p>考试科目和考场编排公布：具体时间待公布</p>
    <p>放榜时间：具体时间待公布</p>
  </div>
</el-card>
    </div>
      <el-card shadow="hover"  style="width: 10%; margin-top:-330px ;margin-left:10px ">
          <div style="width: 100%;  display: inline-block;">
          <router-link to="university">
          <svg-icon icon-class="building-columns-solid (2)" style="width: 70px; height: 70px" />
        </router-link>
             <span style="color:#ff4f52;margin-left:10px;" >找大学</span> 
          </div>
      </el-card>
     <el-card shadow="hover"  style="margin-left:160px;margin-top:-130px;width:10%">
          <div style="width: 100%;  display: inline-block;">
            <router-link to="major"> <svg-icon icon-class="专业" style="width: 70px; height: 70px ;"></svg-icon></router-link>
          <span style="color:#ff4f52;margin-left:10px;">查专业</span> 
          </div>
      </el-card>
      <el-card shadow="hover"  style="margin-left:310px;margin-top:-130px;width:10%;algin:center">
          <div style="width: 100%;  display: inline-block;">
            <router-link to="scores">
            <svg-icon icon-class="位次" style="width: 70px; height: 70px ;"></svg-icon>
            </router-link>
            <span style="color:#ff4f52;margin-left:10px;">位次查询</span> 
          </div>
      </el-card>
      <el-card shadow="hover"  style="margin-left:460px;margin-top:-130px;width:10%">
          <div style="width: 100%;  display: inline-block;">
            <router-link to="article">
            <svg-icon icon-class="高考资讯" style="width: 70px; height: 70px ;fill: yellow;"></svg-icon>
            </router-link>
            <span style="color:#ff4f52;margin-left:10px;">高考资讯</span> 
          </div>
      </el-card>
      <el-card shadow="hover" style="margin-left:610px;width:10%;margin-top:-130px">
  <div style="width: 100%;  display: inline-block; ">
    <router-link to="recommend">
    <svg-icon icon-class="推荐" style="width: 70px; height: 70px;color:red;"></svg-icon>
    </router-link>
    <span style="color:#ff4f52;margin-left:5px;">智能推荐</span> 
  </div>
</el-card>
       <el-card shadow="hover" style="margin-left:760px;margin-top:-130px;width:10%">
          <div style="width: 100%;  display: inline-block;">
            <svg-icon icon-class="分数线" style="width: 70px; height: 70px"></svg-icon><br>
           <span style="color:#ff4f52;">分数线</span> 
          </div>
      </el-card>
   <el-card class="custom-card">
  <div class="title-bar">
    <div class="bar"></div>
    <div class="title">热门院校</div>
    <div class="navigation">
      <el-tabs v-model="activeTab" class="tabs-right-aligned" @tab-click="handleTabClick">
        <el-tab-pane label="新疆本科院校" name="1"></el-tab-pane>
        <el-tab-pane label="新疆专科院校" name="2"></el-tab-pane>
        <el-tab-pane label="外省本科院校" name="3"></el-tab-pane>
        <el-tab-pane label="外省专科院校" name="4"></el-tab-pane>
      </el-tabs>
    </div>
    <svg-icon icon-class="换一换" style="margin-left:150px" class="rotate-icon" @click="handleChange"></svg-icon>换一换
  </div>
  <div class="line"></div>
  <div class="content">
     <div class="school-info" v-bind="firstSchool" v-bind:style="{ background: backgroundColor }">
     <div class="school-name" @click="() => { $router.push({ path: 'universityDetail', query: { id: firstSchool.id } }) }">{{firstSchool.name}}</div>
      <div class="tags">
        <span class="tag">{{firstSchool.category}}</span>
        <span class="tag" v-for="tag in firstSchool.tags" :key="tag">{{ tag }}</span>
        <!-- 其他标签 -->
      </div>
      <div class="avatar">
        <img width="100%" :src="firstSchool.logo" >
      </div>
    </div>
    <!-- 内容 -->
<div style="display: flex; flex-wrap: wrap; justify-content: flex-start; width: 850px; height: 365px; margin-left: 370px; margin-top: -365px;">
<el-card shadow="hover" v-model="otherSchool" v-for="school in otherSchool" :key="school.id" class="university">
<div class="university-info">
    <img width="40%" style="margin-top:-10px;" :src="school.logo">
    <div class="university-details">
      <p class="university-name" @click="() => { $router.push({ path: 'universityDetail', query: { id: school.id } }) }">{{school.name}}</p>
      <div >
        <span class="universityType">{{school.province}}</span>
        <span class="universityType">{{school.category}}</span>
        <!-- 其他标签 -->
      </div>
    </div>
  </div>
</el-card>
</div>
  </div>
</el-card>
头条
  </div>
</template>

<script>
import { Alert, Statistic } from "element-ui";
import{getHotUniversity}from'@/api/university';
export default {
  components: {
    Statistic,
  },
  data() {
    return {
      url: "https://img6.eol.cn/e_images/gk/2023/gjbkps.png", //走马灯图片
      date:"2024-05-06", //高考时间
      stop: true,
      activeTab:'1',
      total:'',
      records:[],
      page:1,
      firstSchool:{},
      otherSchool:[],
      backgroundColor:'#ff8d42',//热门院校左边院校的背景颜色
      tagBorderColor:'#ffb584'
    };
  },
  created(){
  this.queryHotUniversity({"province":1,"type":1,"page":this.page})
  },
methods:{
    //处理热门院校导航
    handleTabClick(tab){
    const tabName = tab.name;
      // 根据不同的标签页执行对应的查询操作 province:1表示新疆 2表示外省  type：1表示
      if (tabName === '1') {
       this.queryHotUniversity({"province":1,"type":1,"page":this.page})
       this.backgroundColor='#ff8d42'
      } else if (tabName === '2') {
       this. queryHotUniversity({"province":1,"type":2,"page":this.page})
       this.backgroundColor='#427dff'
  
      } else if (tabName === '3') {
        this. queryHotUniversity({"province":2,"type":1,"page":this.page})
          this.backgroundColor='#bc28ae'
      } else if (tabName === '4') {
        this.queryHotUniversity({"province":2,"type":2,"page":this.page})
         this.backgroundColor='#00b992'
        
      }
    },
    queryHotUniversity(params) {
    getHotUniversity(params).then((res) => {
    if (res.data.code === 1) {
      //赋值给左边的院校和右边的院校
      const records = res.data.data.records;
      this.firstSchool = records[0];
      this.firstSchool.tags=records[0].tags.split(";")
      this.otherSchool = records.slice(1, 10);
    }
  });
},//换一换
handleChange(){
  const tabName = this.activeTab
  this.page=this.page===1?2:1
   if (tabName === '1') {
       this.queryHotUniversity({"province":1,"type":1,"page":this.page})
       this.backgroundColor='#ff8d42'
      } else if (tabName === '2') {
       this. queryHotUniversity({"province":1,"type":2,"page":this.page})
       this.backgroundColor='#427dff'
  
      } else if (tabName === '3') {
        this. queryHotUniversity({"province":2,"type":1,"page":this.page})
          this.backgroundColor='#bc28ae'
      } else if (tabName === '4') {
        this.queryHotUniversity({"province":2,"type":2,"page":this.page})
         this.backgroundColor='#00b992'
        
      }
}
  }
  ,
  computed: {
    //日期计算
  timeLeft() {
    const deadline = new Date(this.date);
    const now = new Date();
    const diff = deadline - now;
    const days = Math.floor(diff / (1000 * 60 * 60 * 24));
    const hours = Math.floor((diff % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
    const minutes = Math.floor((diff % (1000 * 60 * 60)) / (1000 * 60));
    const seconds = Math.floor((diff % (1000 * 60)) / 1000);
    
    return `${days}天${hours}小时${minutes}分钟`;
  }
}
};
</script>

<style >
.container {
  display: flex;
}

.el-carousel__item h3 {
  color: #475669;
  font-size: 18px;
  opacity: 0.75;
  line-height: 300px;
  margin: 0;
}

.carousel-style {
  border: 1px solid grey;

}

.statistic-card {
  border: 1.5px solid grey;
  margin-left: 20px;
  margin-top: 0px; /* 调整上边距的大小 */
  height: 460px;
  width: 30%;
}
.custom-card {
margin-top: 30px;
position: relative;
background-color: #f5f7fa;
border: 1px solid #ddd;
padding: 0px;
display: flex;
align-self: flex-start;
justify-content: flex-start; /* 将整个 div 左对齐 /
align-items: center; / 垂直居中 */
}

.bar {
width: 6px;
height: 40px;
background-color: #37a2d7;
margin-right: 10px;
margin-left: -10px; /* 将蓝色竖杠向左移动10px */
}

.title-bar {
display: flex;
align-items: center;
justify-content: flex-start; /* 将标题左对齐 /
margin-bottom: 10px;
margin-left: 16px; / 调整标题与竖杠的间距 */
}

.title {
margin-left: 0;
font-size: 18px;
font-weight: bold;
}

.line {
height: 2px;
width:1200px;
background-color: #ff6600;
margin-bottom: 10px;
margin-top: -12px; /* 调整横线与竖杠的间距 */
}
.content {
  padding-top: 20px; /* 调整内容的上边距 */
}

.school-info {
  display: flex;
  flex-direction: column;
  align-items: center;

  padding: 10px;
  border-radius: 4px;
  width: 325px;
  height: 365px;
}

.school-name {
  font-size: 27px;
  color:#fefefe;
  font-weight: bold;
  margin-top: 40px;
 /* 将学校名称向下移动 100px */
}

.tags {
  margin-top: 30px; /* 将标签向上移动 100px */
  margin-bottom: 30px;
}
.tag {
  display: inline-block;
  padding: 5px 10px;
  margin-right: 10px;
  border: 1px solid #ffb584; /* 设置边框颜色为灰色 */
  border-radius: 4px;
  color: #ffe8f7; /* 标签字体颜色 */
}


.avatar {
  width: 160px;
  height: 170px;
  background-color: #fefefe;
}

.navigation {
margin-left: 300px; /* 将 tabs 导航向右移动 500px */
display: flex;
align-items: center;
}

.el-tabs__header {
background-color: transparent; /* 取消 tabs 导航的背景颜色 */
}

.el-tabs__item,
.el-tabs__item:hover,
.el-tabs__item.is-active {
font-size: 20px;
font-weight: bold;
}

.el-tabs__item:hover {
color: #ff6600;
}

.el-tabs__item.is-active {
color: #ff6600;
border-bottom-color: transparent;
margin-right: 16px; /* 调整 tabs 导航项之间的间距 */
}

.el-tabs__active-bar {
  background-color: transparent;


}

.tabs-right-aligned {
display: flex;
justify-content: flex-end;
}
.university {
  position: relative;
  width: 270px;
  height: 107px;
  margin-bottom: 20px;
  margin-left: 10px;
}
.university-info {
  display: flex;
  flex-direction: row;
  align-items: center;
}

.university-details {
  display: flex;
  flex-direction: column;
  align-items: flex-start;

}


.university-text {
  display: flex;
  flex-direction: column;
}

.university-name {
  margin-top: 0px;
  font-size: 18px;
  font-weight: bold;
  color: #08111b;
}



.universityType{
  display: inline-block;
  padding: 5px 10px;
  margin-right: 10px;
  border: 1px solid #bababb; /* 设置边框颜色为灰色 */
  border-radius: 4px;
  color: #d8d8dd; /* 标签字体颜色 */
  font-size: 13px;
}

/* 换一换 */
.rotate-icon {
  transition: transform 0.3s ease-in-out; /* 添加过渡效果，使旋转平滑 */
}

.rotate-icon:hover {
  transform: rotate(180deg); /* 在鼠标移入时将图标旋转180度 */
}
</style>